<template>
  <div class="noticebox">
    <avue-crud :option="option"  :data="data"></avue-crud>
  </div>
</template>

<script>
import { gong } from '@/api/index'
export default {
  data() {
    return {
      data: [],
      option: {
        searchMenuSpan: 6,
        column: [{
          label: '公告内容',
          prop: 'title',
          search: true,
        }, {
          label: '状态',
          prop: '$index',
          search: true,
          formatter: (val, value, label) => {
            return val.$index == 1 ? `<button style='background-color: #409EFF; color: white; padding: 3px 5px;  border: none;'>公布<tton>` : `<button  class="btns" style='  background-color: pink;color: red; padding: 3px 5px;border: none;'>撤销<tton>`
          },
          html:true
        },
        {
          label: '是否置顶',
          prop: 'status',
          search: true,
          formatter: (val, value, label) => {
            return val.status == 1 ? `<button style='background-color: #409EFF; color: white; padding: 3px 5px;  border: none;'>是<tton>` : `<button  class="btns" style='  background-color: pink;color: red; padding: 3px 5px;border: none;'>否<tton>`
          },
          html:true
        }]
      }
    }
  },
  mounted() {
    gong().then(res => {
      console.log(res.data.records);
      this.data = res.data.records
    })
  },
  
}
</script>

<style>
.noticebox{
  width: 100%;
  height: 100%;

}
.avue-crud{
  width: 98%;
  height: 100%;
  background: white;
  margin: 10px;
  padding: 20px;
}
</style>